<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>购物车</title>
        <link rel="stylesheet" href="../css/loaders.css"/>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<style>
			.aui-counter-minus, .aui-counter-plus {
				border: 1px solid #409ee1;
				background: #7fbeeb !important;
			}
			.aui-counter-minus:active, .aui-counter-plus:active{
				background: #409ee1 !important;
			}
			.aui-counter-minus:before, .aui-counter-plus:before {
				color: #fff;
			}
			input.aui-counter-input {
				border-style: solid none;
				border-width: 1px;
				border-color: #409ee1;
				color: #262626;
				background-color: #ffffff;
				text-align: center;
				padding: 0;
			}
			.aui-checkbox {
				border-radius: 15px;
				margin: 8px 12px 8px 10px;
			}
			.aui-checkbox:checked {
				background-color: #409ee1;
				border-color: #409ee1;
			}
			.footer {
				width: 100%;
                margin: 0 auto;
				position: fixed;
				left: 0;
				bottom: 48px;
				border-top:1px solid #dfdfdf;
				background-color:#fff;
			}
			.footer .aui-pull-left span {
				line-height: 42px;
			}
			.footer .aui-pull-right div{display:inline-block;}
			.footer .aui-pull-right .btn {
				line-height: 42px;
				background: #409ee1;
				width:85px;
				text-align:center;
				color:#fff;
				margin-left:15px;
			}
			.footer .aui-pull-right .pay span{
				color:#ff4040;
			}
            #main{
                opacity: 0;
                transition: all 0.5s ease;
            }
            .mask{
                width: 100px;
                height: 100px;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
                position: absolute;
                z-index: 100;
            }
            .loader{
                width: 50px;
                height: 50px;
                left: 18px;
                top: 20px;
                position: absolute;
            }
            .loader-inner div{
                width: 60px;
                height: 60px;
                background-color: #6ac82c;
            }
		</style>
	</head>
	<body>
    <div class="mask">
        <div class="loader">
            <div class="loader-inner ball-scale">
                <div></div>
            </div>
        </div>
    </div>
    <div id="main">
    <header id="header" class="aui-bar aui-bar-nav">
        <div id="header-title" class="aui-title">
            购物车
        </div>
    </header>
    <div id="top-div"></div>
		<ul class="aui-list-view">
			<li class="aui-list-view-cell aui-img aui-counter-list">
				<input class="aui-pull-left aui-checkbox" type="checkbox">
				<img class="aui-img-object aui-pull-left" src="../image/img6.png">
				<div class="aui-img-body">
					香甜红富士苹果
					<div class="aui-counter-box">
						<div class="aui-pull-left aui-text-danger">
							¥ 9.9元
						</div>
						<div class="aui-counter aui-pull-right">
							<div class="aui-counter-minus aui-disabled"></div>
							<input class="aui-counter-input" type="text" value="1">
							<div class="aui-counter-plus"></div>
						</div>
					</div>
				</div>
			</li>
			<li class="aui-list-view-cell aui-img aui-counter-list">
				<input class="aui-pull-left aui-checkbox" type="checkbox">
				<img class="aui-img-object aui-pull-left" src="../image/img2.png">
				<div class="aui-img-body">
					青苹果
					<div class="aui-counter-box">
						<div class="aui-pull-left aui-text-danger">
							¥ 9.9元
						</div>
						<div class="aui-counter aui-pull-right">
							<div class="aui-counter-minus aui-disabled"></div>
							<input class="aui-counter-input" type="text" value="1">
							<div class="aui-counter-plus"></div>
						</div>
					</div>
				</div>
			</li>
			<li class="aui-list-view-cell aui-img aui-counter-list">
				<input class="aui-pull-left aui-checkbox" type="checkbox">
				<img class="aui-img-object aui-pull-left" src="../image/img7.png">
				<div class="aui-img-body">
					新疆西瓜
					<div class="aui-counter-box">
						<div class="aui-pull-left aui-text-danger">
							¥ 9.9元
						</div>
						<div class="aui-counter aui-pull-right">
							<div class="aui-counter-minus aui-disabled"></div>
							<input class="aui-counter-input" type="text" value="1">
							<div class="aui-counter-plus"></div>
						</div>
					</div>
				</div>
			</li>
			<li class="aui-list-view-cell aui-img aui-counter-list">
				<input class="aui-pull-left aui-checkbox" type="checkbox">
				<img class="aui-img-object aui-pull-left" src="../image/img8.png">
				<div class="aui-img-body">
					香甜哈密瓜
					<div class="aui-counter-box">
						<div class="aui-pull-left aui-text-danger">
							¥ 9.9元
						</div>
						<div class="aui-counter aui-pull-right">
							<div class="aui-counter-minus aui-disabled"></div>
							<input class="aui-counter-input" type="text" value="1">
							<div class="aui-counter-plus"></div>
						</div>
					</div>
				</div>
			</li>
		</ul>
		<div class="footer">
			<div class="aui-pull-left">
				<input class="aui-pull-left aui-checkbox" type="checkbox">
				<!--<span class="aui-pull-left ">全选</span>-->
			</div>
			<div class="aui-pull-right">
				<div class="pay">
					合计：<span>￥199.5</span>
				</div>
				<div class="btn" onclick="openOrderFormWin()">
					支付
				</div>
			</div>
		</div>
    <footer class="aui-nav" id="footer">
        <ul class="aui-bar-tab">
            <li><a href="../html/frame_tab_1.html">
                <span class="footer-icon footer-icon1"></span>
                <p>
                    首页
                </p></a>
            </li>
            <li>
                <a href="../html/frame_tab_2.html">
                <span class="footer-icon footer-icon2"></span>
                <p>
                    产品分类
                </p></a>
            </li>
            <li class="active">
                <span class="footer-icon footer-icon3"></span>
                <p>
                    购物车
                </p>
            </li>
            <li><a href="../html/frame_tab_4.html">
                <span class="footer-icon footer-icon4"></span>
                <p>
                    个人中心
                </p></a>
            </li>
        </ul>
    </footer>
    </div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript">
        window.onload=function(){
            setTimeout(function(){
                $('.mask').css('display','none');
                $('#main').css('opacity','1');
            },250)
        };
	$('.aui-counter-plus').click(function(){
		var a = $(this).parent().find('.aui-counter-input').val();
		a++;
		$(this).parent().find('.aui-counter-input').val(a);
	});
	$('.aui-counter-minus').click(function(){
		var a = $(this).parent().find('.aui-counter-input').val();
		if(a > 0){
			a--;
			$(this).parent().find('.aui-counter-input').val(a);
		}
	});
    $('.aui-img-object').click(function () {
        window.location.href = '../html/detail.html'
    });
	function openOrderFormWin(){
        window.location.href = '../html/order_form.html'
	}
	</script>
</html>